<script setup lang="ts">
import { onMounted } from 'vue';
import { getCurrentInstance } from '@tarojs/taro';
import { QUERY_AREA_MAP_DEVICE_DETAIL_BY_DEVICE_ID } from '/@/api/modules/map/area-map';
import { CAMERAS_PREVIEW_URLS } from '/@/api/modules/video/cameras';
import { getSysImgUrl } from '/@/utils/index';
import { state } from './state';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  deviceId: string;
};

onMounted(() => {
  CAMERAS_PREVIEW_URLS({ cameraId: params.deviceId, streamType: 1, streamProtocol: 6 }).then(
    (res) => {
      state.playUrl = res.content?.hls || '';
    },
  );
  QUERY_AREA_MAP_DEVICE_DETAIL_BY_DEVICE_ID({ deviceId: params.deviceId, objectType: 1 }).then(
    (res) => {
      state.areaMapDto = res.areaMapDto;
      state.areaMapDeviceDto = res.content.areaMapDeviceDto;
      state.areaInfoDto = res.content.areaInfoDto;
    },
  );
});
</script>

<template>
  <view class="video-monitor-detail app-page--1">
    <app-navbar :title="state.areaMapDeviceDto.deviceName || '监控详情'" />

    <app-ali-player
      class="video-monitor-detail__ali-player"
      id="video-monitor-detail"
      :src="state.playUrl"
      width="100%"
      height="300px"
    />

    <view v-if="state.areaMapDto.fileUrl" class="video-monitor-detail__map-wrapper">
      <image mode="widthFix" :src="getSysImgUrl(state.areaMapDto.fileUrl || '')" />
      <view
        class="video-monitor-detail__device-dot"
        :style="{ top: state.areaMapDeviceDto.latitude, left: state.areaMapDeviceDto.longitude }"
      ></view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
